iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
1
Modern Web

從零開始的個人化記帳程式開發系列 第 6

記帳程式 (06):Linter、Formatter 設定與 Element UI 安裝

  • 分享至 

  • xImage
  •  

接續昨天沒設定完的專案設定,今天花了比較多時間在調整 Linter 與 Formatter 的設定,並載入 Element 這個 UI 元件庫。

今日大綱

  • Linter、Formatter 在 VS Code 上的設定
  • 安裝 Element UI 元件庫

Linter、Formatter 在 VS Code 上的設定

因為原本在 VS Code 中的 settings.json,有自己放一些 Vetur、Prettier 的設定,但這些設定會與 Vue CLI 預設用 ESLint 建好的規則打架。

測試後發現原因是出在 .eslintrc.js 中的這一行:

extends: ["plugin:vue/essential", "@vue/prettier"],

之前在建專案時選擇了 ESLint + Prettier,這其實是指用 @vue/eslint-config-prettier 這個標準的規範去做 Linter,與自己平常使用的規範不同,變得有點綁手綁腳,當初應該只選 ESLint with error prevention only,自己另外設定一些規則就好:

自己開發專案還用 Linter 真的是自己搞自己...

於是手動改成以下這行再另外自己設定一些分號、單引號、Vue Component 屬性順序等規則就好囉:

extends: ['eslint:recommended', 'plugin:vue/recommended']

另外也在專案根目錄中新增一個 .vscode 的資料夾,裡面放入 settings.json,加在這裡的設定,可以適用於所有同一個專案下所有開發者的工作區。若是在團隊開發且都是使用 VS Code 的狀況下,將一些 formatter 的設定放在這,能讓程式碼風格自動 format 的更統一。

而在這個專案中,主要是使用 Vetur 這個 extension 中有一些設定,能利用 Prettier 做存檔時的 format Vue 檔 coding style:

{
  "vetur.format.styleInitialIndent": true,
  "vetur.format.scriptInitialIndent": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "printWidth": 120,
      "semi": false,
      "eslintIntegration": false,
      "singleQuote": true
    },
    "js-beautify-html": {
      "wrap_line_length": 120,
      "wrap_attributes": "force-expand-multiline"
    }
  }
}

相關完整的設定參考 Github 上的.eslintrc.jssettings.json

安裝 Element UI 元件庫

Element 是一套基於 Vue 2.0 設計的 UI 元件庫,其他選擇還有像是 Bootstrap-VueVuetify,選擇這一套的原因是最近工作上會用到,開發 side project 時順便當作練習熟悉。

安裝方法很簡單,在 terminal 打上以下這行就好了:

vue add element

安裝好後會發現,它還很貼心的在首頁上自動幫忙加了一個 Element 的「按鈕」,代表安裝成功囉:

關於 element-ui 其他的安裝方法也可以參考官網文件哦!

總結

關於專案設定的內容有點太完美主義作祟了,再深入挖下去寫,真的會太偏離「記帳程式」這個主題,今天先簡單列出在這個專案做了哪些初始設定就好。

明天要正式進入開發記帳程式要做的功能了!


上一篇
記帳程式 (05):編排檔案結構與分支管理
下一篇
記帳程式 (07):記帳程式畫面布局
系列文
從零開始的個人化記帳程式開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言